<script>
		var setting = {
			data: {
				simpleData: {
					enable: true
				}
			},
			callback: {
				//onCollapse: alert("up"),
				onExpand: function(){
					if (treeNiceScroll) {
						treeNiceScroll.resize();
					}
				}
			},
			view: {
				showLine: false
			}
		};
		var zNodes1 =[
			{ id:1, pId:0, name:"调度资源分组", open:true},
			{ id:11, pId:1, name:"通信调度"},
			{ id:1111, pId:11, name:"Quartz-2"},
			{ id:1112, pId:11, name:"Quartz-3"},
			{ id:12, pId:1, name:"报表调度"},
			{ id:1211, pId:12, name:"Quartz-2"},
			{ id:1212, pId:12, name:"Quartz-3"},
			{ id:13, pId:1, name:"数据结算"},
			{ id:1311, pId:13, name:"Quartz-2"},
			{ id:1312, pId:13, name:"Quartz-3"}
		];

		$(document).ready(function(){
			//var treeNiceScroll = false;
			treeNiceScroll = $("#zteres, .side_accordion_warp").niceScroll({cursorcolor:"#d7d7d7"});
			$(".side_accordion_warp").rsAccordion();	
			$.fn.zTree.init($(document.getElementById("zteres")), setting, zNodes1);
			$(".nav_tabwps_2").rs_simpleTabs({
				tabElem				:".nav_tapIthems",			//切换标签的子元素
				tabCurrent			:"cur",						//切换标签的Current状态
				tabCont				:".nav_tabwps_2con",		//切换的元素内容父级
				tabContLayer		:".nav_tabwps_2_layouts",	//切换的元素内容层
				tabContLayerShow	:"show",					//切换的元素Current状态
				afclick				:null						//回调函数接口			
			});
			$(".nav_tabwps_3").rs_simpleTabs({
				tabElem				:".nav_tapIthems",			//切换标签的子元素
				tabCurrent			:"cur",						//切换标签的Current状态
				tabCont				:".nav_tabwps_3con",		//切换的元素内容父级
				tabContLayer		:".nav_tabwps_3_layouts",	//切换的元素内容层
				tabContLayerShow	:"show",					//切换的元素Current状态
				afclick				:null						//回调函数接口			
			});
			
			
			
			$('#dg').datagrid({
				fit:true,
				url:'/assets/js/datagrid_data1.json',
				view: detailview,
				detailFormatter:function(index,row){
					return '<div id="ddv-' + index + '" style="padding:5px 0">openDataHere</div>';
				},
				onRowContextMenu: function (e, rowIndex, field) {
					e.preventDefault();
					var contextmemu;
					if (!$("#tmenu").length) {
						createColumnMenu();
						
					} 
					contextmemu = $("#tmenu"); 
					contextmemu.menu({
						onShow:function() {
							$(contextmemu.menu("findItem","Edit").target).attr("rowIndex",rowIndex)
							$(contextmemu.menu("findItem","Delete").target).attr("rowIndex",rowIndex)
						}
					}).menu('show', {
						left: e.pageX,
						top: e.pageY
					});
				},
				onHeaderContextMenu:function(e, field){
					e.preventDefault();
					var contextHeadmemu;
					if (!$("#hmenu").length) {
						createHeadMenu();
					}
					contextHeadmemu = $("#hmenu");
					contextHeadmemu.menu('show', {
						left: e.pageX - 2,
						top: e.pageY - 2
					});
				},
				onExpandRow: function(index,row){
					/*$('#ddv-'+index).panel({
						border:false,
						cache:false,
						href:'datagrid21_getdetail.php?itemid='+row.itemid,
						onLoad:function(){
							$('#dg').datagrid('fixDetailRowHeight',index);
						}
					});*/
					$('#dg').datagrid('fixDetailRowHeight',index);
				}
			});
			$(window).on("resize",function() {
				$('#dg,#sampleGrid2').datagrid("resize");
			});
			function createHeadMenu() {
				var hmenu = $('<div id="hmenu" style="width:120px"></div>').appendTo("body");
				var fields = $('#dg').datagrid('getColumnFields');
				for (var i = 0; i < fields.length; i++) {
					$('<div iconCls="icon-ok"/>').html(fields[i]).appendTo(hmenu);
				}
				hmenu.menu({
					onClick:function(item) {
						if (item.iconCls == "icon-ok") {
							$('#dg').datagrid('hideColumn', item.text);
							hmenu.menu('setIcon', {
								target: item.target,
								iconCls: 'icon-empty'
							});
						}else {
							$('#dg').datagrid('showColumn', item.text);
							hmenu.menu('setIcon', {
								target: item.target,
								iconCls: 'icon-ok'
							});
						}
					}
				});
			}
			
			function createColumnMenu() {
				var tmenu = $('<div id="tmenu" style="width:100px;"></div>').appendTo('body');
				var fields = $('#dg').datagrid('getColumnFields');
			   // for (var i = 0; i < fields.length; i++) {
			   //     $('<div iconCls="icon-ok"/>').html(fields[i]).appendTo(tmenu);
				//}
				tmenu.append(
					$('<div iconCls="tree-folder-open"/>').html("Open"),
					$('<div iconCls="icon-edit"/>').html("Edit"),
					$('<div iconCls="icon-remove"/>').html("Delete"),
					$('<div class="menu-sep"/>'),
					$('<div iconCls="tci-2 bgcenter" data-options="disabled:true"/>').html("Start"),
					$('<div iconCls="tbico-9 bgcenter"/>').html("Pause"),
					$('<div iconCls="icon-no"/>').html("Stop")
				)
				tmenu.menu({
					onClick: function (item) {
						if (item.iconCls == 'icon-ok') {
							$('#dg').datagrid('hideColumn', item.text);
							tmenu.menu('setIcon', {
								target: item.target,
								iconCls: 'icon-empty'
							});
						} else if (item.iconCls == "icon-remove") {
							var rowidx = item.target.getAttribute("rowIndex");
							$("#dg").datagrid("deleteRow", rowidx);
						} else if (item.iconCls == "icon-edit") {
							$('#dg').datagrid('beginEdit', item.target.getAttribute("rowIndex")); 
						}
						//else {
						 //   $('#dg').datagrid('showColumn', item.text);
						  //  tmenu.menu('setIcon', {
						   //     target: item.target,
							//    iconCls: 'icon-ok'
						   // });
					   // }
					}
				});
			}
		}) ;

		window.onload = function() {
			$('#sampleGrid2').datagrid({
				fitColumns:"true",
				fixed:true,
				fit:true,
				url:"/assets/js/datagrid_data2.json",
				columns:[[
					{width:100,field:'StartedAt',title:'Started At',align:"left",sortable:true},
					{width:100,field:'FinishedAt',title:'Finished At',align:"left",sortable:true},
					{width:100,field:'Duration',title:'Duration',sortable:true},
					{width:100,field:'StartTime',title:'Start Time',sortable:true},
					{width:100,field:'JobDataMap',title:'Job Data Map',align:"center",sortable:true},
					{width:100,field:'TriggerGroup',title:'Trigger Group',sortable:true},
					{width:100,field:'Result',title:'Result',sortable:true},
					{width:100,field:'Error',title:'Error',sortable:true},
					{width:100,field:'NextFireTime',title:'Next Fire Time',sortable:true},
					{width:100,field:'FinalFireTime',title:'Final Fire Time',sortable:true},
					{width:100,field:'checkbox',title:'Final Fire Time',checkbox:true}
				]],
				view:$.extend({}, $.fn.datagrid.defaults.view, {
					//下面这行是在渲染结束之后执行的东西。 
					//onAfterRender: function (target) { alert(0) }
				})
			});
		}	

</script>
<div class="rs_layout">
	<div class="rs_layout_left" resizable="true" style="width:232px;">
		<div class="side_accordion_warp">
			<dl class="sal show">
				<dt><em class="sawbtn sab-1"></em><span class="sawt">作业调度器</span></dt>
				<dd>
					<div class="sawContorl">
						<div class="sawIcons sawic-1"></div>
						<div class="sawIcons sawic-2"></div>
						<div class="sawLine"></div>
						<div class="sawIcons sawic-3 arrow">
							<div class="sawArrow"></div>
						</div>
						<div class="sawIcons sawic-4"></div>
						<div class="sawIcons sawic-5"></div>
					</div>
					<div class="sawTrees ztree" id="zteres">Loading...</div>
				</dd>
			</dl>
		</div>
	</div>
	<div class="rs_layout_center">
		<div class="rs_layout">
			<div class="rs_layout_center">
				<div class="rs_halfHeight">
					<div class="rs_layout">
						<div class="rs_layout_center">
							<div class="rs_layout">
								<div class="rs_layout_top">
									<ul class="nav_tapWrap nav_tabwps_2 tabhasClose">
										<li class="nav_tapIthems cur"><em class="tabClosed"></em><i class="tabIcon tabicon-1"></i>Quartz v1.x</li>
										<li class="nav_tapIthems "><em class="tabClosed"></em><i class="tabIcon tabicon-1"></i>Quartz v2.x</li>
									</ul>
								</div>
								<div class="rs_layout_center nav_tabwps_2con">
									<div class="nav_tabwps_2_layouts show">
										<div class="rs_layout">
											<div class="rs_layout_top">
												<ul class="nav_tapWrap nav_tabwps_3">
													<li class="nav_tapIthems cur"><i class="tabIcon tabicon-2"></i>任务</li>
													<li class="nav_tapIthems "><i class="tabIcon tabicon-3"></i>触发器</li>
													<li class="nav_tapIthems "><i class="tabIcon tabicon-4"></i>调度信息</li>
													<li class="nav_tapIthems "><i class="tabIcon tabicon-5"></i>执行历史</li>
													<li class="nav_tapIthems "><i class="tabIcon tabicon-6"></i>任务统计</li>
													<li class="nav_tapIthems "><i class="tabIcon tabicon-7"></i>任务提示</li>
												</ul>
											</div>
											<div class="rs_layout_center nav_tabwps_3con">
												<div class="nav_tabwps_3_layouts show">
													<div class="rs_layout">
														<div class="rs_layout_top tbControlBar" style="height:30px;">
															
															<em class="tbcontIcon tbir tbico-7"></em>
															<em class="tbcontIcon tbico-1"></em>
															<em class="tbcontIcon tbico-2"></em>
															<em class="sawLine2"></em>
															<em class="tbcontIcon tbico-3"></em>
															<em class="tbcontIcon tbico-4"></em>
															<em class="tbcontIcon tbico-5"></em>
															<em class="tbcontIcon tbico-6"></em>
															<em class="sawLine2"></em>
															<div class="cusSelectWrap cusSelect_1">
																<input type="hidden">
																<div class="cusSelectText"><em class="innerText">请选择</em><em class="cusArrow"></em></div>
																<em class="cusClear"></em>
																<div class="cusSelectListWrap">
																	<ul>
																		<li val="123" class="cusIthems">11111</li>
																		<li val="jk2" class="cusIthems">22222</li>
																		<li val="55" class="cusIthems">33333</li>
																		<li val="251" class="cusIthems">444444</li>
																	</ul>
																</div>
															</div>
															<em class="tbcontIcon tbico-8"></em>
															<em class="tbcontIcon tbico-9"></em>
														</div>
														<div class="rs_layout_center">
															<div class="clear">&nbsp;</div>
															<table id="dg"sortName="itemid" sortOrder="desc"singleSelect="true" fitColumns="true">
																<thead>
																	<tr>
																		<th field="productid" width="80">Name</th>
																		<th field="productname" width="100">Group</th>
																		<th field="unitcost" align="right" width="80" >Class</th>
																		<th field="status" align="right" width="80">Job Data Map</th>
																		<th field="listprice" width="220">Durable</th>
																		<th field="attr1" width="60" align="center">Recoverable</th>
																		<th field="itemid" width="60" align="center" editor="{type:'checkbox',options:{on:'P',off:''}}">Volatile</th>
																	</tr>
																</thead>
															</table>
														</div>
													</div>
												</div>
												<div class="nav_tabwps_3_layouts">2</div>
												<div class="nav_tabwps_3_layouts">3</div>
												<div class="nav_tabwps_3_layouts">4</div>
												<div class="nav_tabwps_3_layouts">5</div>
												<div class="nav_tabwps_3_layouts">6</div>
											</div>
										</div>
									</div>
									<div class="nav_tabwps_2_layouts">nothing</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="rs_halfHeight">
					<div class="rs_layout">
						<div class="rs_layout_center">
							<div class="rs_layout">
								<div class="rs_layout_top">
									<ul class="nav_tapWrap">
										<li class="nav_tapIthems cur"><i class="tabIcon tabicon-5"></i>Execution History</li>
										<li class="nav_tapIthems "><i class="tabIcon tabicon-3"></i>Triggers</li>
										<li class="nav_tapIthems "><i class="tabIcon tabicon-7"></i>Execution Notification</li>
									</ul>
								</div>
								<div class="rs_layout_center">
									<div class="rs_layout">
										<div class="rs_layout_top" style="height:30px;">
											<em class="tbcontIcon tbir tbico-7"></em>
											<em class="tbcontIcon tbico-1"></em>
											<em class="sawLine2"></em>
											<em class="tbcontIcon tbico-3"></em>
											<em class="tbcontIcon tbico-4"></em>
											<em class="tbcontIcon tbico-5"></em>
											<em class="tbcontIcon tbico-6"></em>
											<em class="sawLine2"></em>
											<em class="tbcontFont">Max fresh data：</em>
											<div class="cusDatapickerWrap">
												<input type="text" class="datapickerElem">
											</div>
											<em class="tbcontFont">Max fresh size：</em>
											<div class="cusSelectWrap cusSelect_1">
												<input type="hidden" value="20">
												<div class="cusSelectText"><em class="innerText">20</em><em class="cusArrow"></em></div>
												<div class="cusSelectListWrap">
													<ul>
														<li val="30" class="cusIthems">30</li>
														<li val="40" class="cusIthems">40</li>
														<li val="50" class="cusIthems">50</li>
														<li val="60" class="cusIthems">60</li>
													</ul>
												</div>
											</div>
											<em class="tbcontIcon tbico-8"></em>
											<em class="tbcontIcon tbico-9"></em>
										</div>
										<div class="rs_layout_center">
											<table id="sampleGrid2" ></table>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="rs_layout_bottom toolBar_bottom">
				<ul class="toolbarBottom_IconWrap">
					<li class="tb-icons-1"></li>
					<li class="tb-icons-2"></li>
					<li class="tb-icons-3"></li>
					<li class="tb-icons-4"></li>
				</ul>
			</div>
		</div>
	</div>

</div>
